<template>
	<navigatorComp title="个人简介" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<view class="content">
		<up-textarea
			disableDefaultPadding
			:adjustPosition="false"
			placeholderClass="placeholderClass"
			v-model="summarize"
			placeholder="请输入你的个人简介,记录重大事件,比如过继、出嗣"
			count
			height="896rpx"
			border="none"
			maxlength="2000"
			style="margin-top: 32rpx"
		></up-textarea>
		<footerBtn name="保存" @clickBtn="submit" bgcColor="#121512"></footerBtn>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';

const summarize = ref('');
const instance = getCurrentInstance().proxy;
const eventChannel = instance.getOpenerEventChannel();

onLoad((options) => {
	summarize.value = options.summarize;
});

/**
 * 点击提交
 */
const submit = () => {
	console.log('点击提交');
	eventChannel.emit('getSummberize', { summarize: summarize.value });
	uni.navigateBack();
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	background-color: #121512;
}

.title {
	font-weight: 400;
	font-size: 32rpx;
	color: #ececec;
	line-height: 38rpx;
	margin: 32rpx 0;
}

::v-deep .placeholderClass {
	font-weight: 400 !important;
	font-size: 28rpx !important;
	color: #969da3 !important;
	line-height: 33rpx !important;
}

::v-deep .u-textarea {
	background: #333333 !important;
	padding: 32rpx 40rpx !important;
	box-sizing: border-box !important;
}

::v-deep .u-textarea__field {
	color: #fff !important;
	font-size: 28rpx !important;
	text-align: justify !important;
}

::v-deep .u-textarea__count {
	background: none !important;
	font-weight: 400 !important;
	font-size: 28rpx !important;
	color: #969da3 !important;
	line-height: 33rpx !important;
	margin-right: 25rpx;
	margin-bottom: 24rpx;
	padding: 0;
}

.footerBtn {
	width: 100%;

	.area {
		width: 100%;
		height: 96rpx;
	}

	.btn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 88rpx;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 32rpx;
		color: #524630;
		line-height: 88rpx;
		letter-spacing: 1px;
		text-align: center;
		bottom: calc(env(safe-area-inset-bottom) + 8rpx);
	}
}
</style>
